import React, {Component} from 'react'
import {Route} from 'react-router-dom'


import MessageDetail from './message-detail'
import MyNavLink from "../components/MyNavLink";
/*
* 路由组件中的路由就称为嵌套路由
* */

/*
* 如何编写路由效果:
* 1.编写路由组件
* 2.在父路由组件中指定:  a.路由连接<NavLink>  b.路由<Route>
* */

export default class Message extends Component{

    state = {
        messages: [
            /*每一个都是一个对象*/
            /*{id:1, title:'message001'},
            {id:2, title:'message002'},
            {id:3, title:'message003'},
            {id:4, title:'message004'},*/

        ]
    }

    /*
    * 模拟发送ajax请求异步获取数据
    * */
    componentDidMount() {
        setTimeout(() => {
            // 获取数据
            const messages = [
                {id:1, title:'message001'},
                {id:2, title:'message002'},
                {id:3, title:'message003'},
                {id:4, title:'message004'},
            ]
            // 更新状态
            this.setState({messages})
        }, 1000)

    }


    /* 这个数据是异步加载的
    * 并且还是链接
    * <a href={`/home/message/messagedetail/${m.id}`}>{m.title}</a>
    *  */
    render() {

        return (
            <div>
                <ul>
                    {
                        /*结构比较复杂的时候就可以加上() */
                        this.state.messages.map((m, index) => (
                            <li key={index}>
                                <MyNavLink  to={`/home/message/messagedetail/${m.id}`}>{m.title}</MyNavLink>
                            </li>
                        ))
                    }
                </ul>
                {/*注意这里冒号  占位符的使用 这个id是参数而不是路径  */}
                <Route path='/home/message/messagedetail/:id' component={MessageDetail} ></Route>
            </div>

        )
    }

}

